<!doctype html>
<html ng-app="chinaums.study">
<head>
    <title>1、文件上传</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="webjars/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css"/>
    <script type="application/javascript" src="webjars/angularjs/1.6.0/angular.min.js"></script>
    <script type="text/javascript" src="upload-file.js"></script>
    <style>
        .form-control {
            height: auto;
        }

        .form-group input[type=file] {
            opacity: 0.8;
            position: inherit;
        }
    </style>
</head>
<body>
<div class="container" ng-controller="uploadCtrl">
    <div class="jumbotron">
        <div class="jumbotron-body">
            <h1>文件上传</h1>
            <p>填写文件信息并选择上传文件，服务会计算文件大小并返回结果</p>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">文件信息</h3>
        </div>
        <div class="panel-body">
            <form method="post" enctype="multipart/form-data" ng-init="formData = {}" ng-submit="submit(formData)">
                <div class="form-group">
                    <label for="type">文件类型</label>
                    <input type="text" class="form-control" id="type" ng-model="formData.type">
                </div>

                <div class="form-group">
                    <label for="desc">摘要</label>
                    <input type="text" class="form-control" id="desc" ng-model="formData.desc">
                </div>

                <div class="form-group">
                    <label for="file">文件</label>
                    <input type="file" class="form-control" id="file" file-model="formData.file">
                </div>

                <button type="submit" class="btn btn-primary">上传</button>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">应答信息</h3>
        </div>
        <div class="panel-body">
            <ul id="response-message">
                <li ng-repeat="(key, value) in result">
                    {{key}} : {{value}}
                </li>
            </ul>
            <div id="error-message">
                {{errorMessage}}
            </div>
        </div>
    </div>
</div>
</body>
</html>